<template>
    <div class="header-wrap">
        <input type="text" v-model="title" placeholder="请输入内容..." @keyup.enter="handleAddTodo">
    </div>
</template>

<script>

import { nanoid } from 'nanoid';

export default {
    name: "MyHeader",
    data() {
        return {
            title: ''
        }
    },
    methods: {
        handleAddTodo() {
            if (!this.title.trim()) return alert('请输入内容...')
            const obj = {
                id: nanoid(),
                title: this.title.trim(),
                done: false
            }
            this.$emit('addTodo',obj)
            this.title = ''
        }
    },
}
</script>

<style scoped>
input {
    width: 380px;
    height: 35px;
    border-radius: 5px;
    border: 2px solid ;
    padding: 2px;
}
input:focus{
    border: 2px solid skyblue;
    outline: none;
}
</style>